<template>
  <a-spin :spinning="confirmLoading">
    <div class="app-container"  data-title="批量上传">
      <div class="app-box">
        <a-menu v-model="current" mode="horizontal" style="margin-bottom: 10px">
          <a-menu-item key="1" @click="changeTab('1')" style="width:200px">
            <a-icon type="menu-unfold" />文件上传</a-menu-item
          >
           <a-menu-item key="5" @click="changeTab('2')" style="width:200px">
            <a-icon type="paper-clip" />文件属性</a-menu-item
          >
          <a-menu-item key="3" @click="changeTab('3')" style="width:200px">
            <a-icon type="solution" /> 共享范围</a-menu-item
          >
         

          <a-button type="primary" style="float:right;margin-top:5px;" @click="handlePublish"> 发布</a-button>
          <!--            <a-button type="" style="float:right;margin-top:5px;margin-right: 5px;">更新属性</a-button>-->
        </a-menu>

        <a-card v-show="activeTab == '1'">
          <LibFileAttach ref="attach" :hteFile="hteFile" :parentId="parentId" />
        </a-card>
         <a-card v-show="activeTab == '2'">
          <FilesContent ref="main" :parentId="parentId" @changeClass="handleChangeClass" />
        </a-card>
        <a-card v-show="activeTab == '3'">
          <BatchFileRange ref="range" :parentId="parentId" :classId="classId"/>
        </a-card>
       
      </div>
    </div>
  </a-spin>
</template>

<script>
import FilesContent from '@/views/library/batchFile/FilesContent';
import LibFileAttach from '@/views/library/batchFile/LibFileAttach';
import { getAction, postAction } from '@/api/manage';
import BatchFileRange from '@/views/library/batchFile/BatchFilesRange';
// import * as localStorage from '@/utils/localStorage';
export default {
  components: {
    FilesContent,
    LibFileAttach,
    BatchFileRange
  },
  data() {
    return {
      current: ['1'],
      activeTab: '1',
      classTree: [],
      classAttrList: [],
      hteFile: {},
      urls: {
        batchFilePublish: '/lib/hteBatchFile/publish'
      },
      parentId: this.$route.params && this.$route.params.c,
      fileId: this.$route.params && this.$route.params.id,
      version: this.$route.params && this.$route.params.v,
      classId: null,
      confirmLoading: false
    };
  },
  created() {},
  methods: {
    changeTab(tab) {
      this.activeTab = tab;
    },

    /**
     * 保存文件信息
     */
    handlePublish() {
      const rangeList = [];
      this.$refs.range.tableData.forEach(it => {
        if (it.shareType == 2) {
          rangeList.push(it);
        }
      });
      console.log(JSON.stringify(rangeList));
      debugger;

      if (!this.classId) {
        this.$message.error('请先选择目录!');
        return false;
      }
      const attrList = this.$refs.main.tableData;
      if (attrList.length == 0) {
        this.$message.error('请导入属性!');
        return false;
      }
      const attachList = this.$refs.attach.fileList;
      if (attachList.length == 0) {
        this.$message.error('请上传文件!');
        return false;
      }
      if(attrList.length != attachList.length){
         this.$message.error('文件上传列表和文件属性列表数量不一致!');
        return false;
      }
      for (let index = 0; index < attachList.length; index++) {
        const element = attachList[index];
        //空格转换
        let fileName = element.fileName.substring(0,element.fileName.lastIndexOf('.')).replace(/\s+/,' ')
        if(!fileName){
            this.$message.error(`附件名称为空字符${fileName}！`);
            return false;
        }
        let checkFileName= attrList.find(item=>{

          return item.fileName ==fileName
        })
        if(!checkFileName){
          this.$message.error(`附件名称${fileName}在文件属性列表上不存在！`);
          return false;
        }
      }
      const that = this;
      this.$confirm({
        title: '确认发布',
        content: '确认批量发布这些文件吗?',
        onOk: function() {
          postAction(that.urls.batchFilePublish, {
            classId: that.classId,
            attrList: attrList,
            attachList: attachList,
            rangeList: rangeList
          }).then(res => {
            if (res.success) {
              that.$message.success('发布成功');
              that.$router.push('/library/index/' + that.parentId);
            } else {
              that.$message.error(res.message);
            }
            that.confirmLoading = false;
          });
        },
        cancelText: '取消',
        okText: '确定'
      });
    },
    handleChangeClass(val) {
      this.classId = val;
      this.$refs.range.loadRange(this.classId);
    }
  }
};
</script>

<style scoped lang="less">
#app {
  background: #f5f5f5;
}
.app-container {
  position: relative;
  width: 100%;
  background: #f5f5f5;
  height: 100%;
  min-height: 100vh;
  justify-content: center;
  padding-top: 30px;
}
.botton-bar {
  position: fixed;
  bottom: 30px;
  text-align: center;
  width: 80%;
}
.botton-bar button {
  width: 200px;
}
.app-box {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
.fixed-menu {
  position: absolute;
  top: 48px;
  right: 0vw;
  z-index: 10000;
  width: 80px;
  right: -95px;
}
.functionMould {
  background-color: #ffffff;
  height: 80px;
  padding-top: 18px;
  text-align: center;
  margin-bottom: 10px;
  cursor: pointer;
}
.functionMould > span {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #000000;
  display: block;
}
.menu-icon {
  font-size: 24px;
  color: #31a0e1;
}
.ant-menu-item {
  border: 1px solid #31a0e13d !important;
  padding: 0 0px;
  /*width: 20%;*/
  text-align: center;
}
.ant-menu-item-selected {
  color: #ffffff !important;
  background: #31a0e1 !important;
}
/deep/.el-textarea {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: 14px;
}
</style>
